@import '../global/variables.css';

/* ensure style order */
@import '../popup/popup.css';

.container {
  display: inline;
}

.message {
  overflow: visible;

  max-width: calc(var(--ring-unit) * 40);

  padding: calc(var(--ring-unit) * 1.5) calc(var(--ring-unit) * 1.5) calc(var(--ring-unit) * 2)
    calc(var(--ring-unit) * 5);

  text-align: left;

  color: var(--ring-active-text-color);

  background-color: var(--ring-popup-background-color);
}

.icon {
  position: absolute;
  top: 10px;
  left: calc(var(--ring-unit) * 1.5);
}

.title {
  composes: font-lower from '../global/global.css';

  margin: 0;

  font-weight: normal;
}

.description {
  margin: calc(var(--ring-unit) / 2) 0 0;

  color: var(--ring-text-color);

  font-size: var(--ring-font-size-smaller);
  line-height: var(--ring-line-height-lowest);
}

.gotIt {
  margin: calc(var(--ring-unit) * 1.5) calc(var(--ring-unit) * 2) 0 0;
}

.tail {
  position: absolute;

  box-sizing: border-box;
  width: 11px;
  height: 11px;

  transform-origin: 0 0;

  border: 1px solid;
  border-color: transparent transparent var(--ring-popup-border-color) var(--ring-popup-border-color);

  background-color: var(--ring-popup-background-color);
}
